<template>
  <div id="resize" :ref="ref">
    <template v-if="ready">
      <slot></slot>
    </template>
  </div>
</template>
<style>
#resize {
  position: fixed;
  top: 0px;
  left: 0px;
  overflow: hidden;
  transform-origin: left top;
  z-index: 999;
}
</style>
<script >
import autoResize from "@/utils/resize/autoResize";

export default {
  name: "DvFullScreenContainer",
  mixins: [autoResize],
  data() {
    return {
      ref: "full-screen-container",
      allWidth: 0,
      allheight: 0,
      scale: 0,
      datavRoot: "",
      ready: false,
    };
  },
  methods: {
    // resize位置left切换
    resizeLeft() {
      var browserWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
      const clientHeight = document.body.clientHeight;

      let actualWidth=(1920*(clientHeight / this.allheight))
      let leftNum=((browserWidth-actualWidth)/2).toFixed(0)
      let resizeDom=document.getElementById('resize')
      resizeDom.style.left = `${leftNum}px`;
    },
    afterAutoResizeMixinInit() {
      const { initConfig, setAppScale } = this;

      initConfig();

      setAppScale();

      this.ready = true;
    },
    initConfig() {
      const { dom } = this;
      // const { width, height } = screen;
      const width='1920'
      const height='1080'
      this.allWidth = width;
      this.allheight= height;
      dom.style.width = `${width}px`;
      dom.style.height = `${height}px`;
      this.resizeLeft()
    },
    setAppScale() {
      const { allWidth, dom,allheight } = this;
      const currentWidth = document.body.clientWidth;
      const clientHeight = document.body.clientHeight;
      if ((currentWidth/clientHeight)>(1920/1080)) {
        dom.style.transform = `scale(${clientHeight / allheight})`;
        this.resizeLeft();
      } else {
        dom.style.transform = `scale(${currentWidth / allWidth})`;
        let resizeDom=document.getElementById('resize')
        resizeDom.style.left = "0px";
      }
    },
    onResize() {
      const { setAppScale } = this;

      setAppScale();
    },
  },
};
</script>
